<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骨架屏</title>
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/layout.css" />
    <link rel="stylesheet" href="./css/components.css" />
    <!-- element-ui -->
    <link rel="stylesheet" href="../libs/element-ui/index.css" />
    <!-- 库文件 -->
    <script src="../libs/js/axios.js"></script>
    <script src="../libs/js/vue-router.js"></script>
    <script src="../libs/js/vue-v2.6.10.js"></script>
</head>

<body>
    <div id="app">
        <div class="header">标题</div>
        <div class="main">
            <el-scrollbar style="width:100%;height: 100%;overflow-x: none;">
                <router-view></router-view>
            </el-scrollbar>
        </div>
        <div class="footer">
            <template v-for="item of list">
                <router-link class="nav-item" :id="item.id" :to="item.path">
                    <i class="icon" :class="item.icon"></i>
                    <span class="label">{{item.label}}</span>
                </router-link>
            </template>
        </div>
    </div>
    <!-- home页面 -->
    <template id="home-view">
        <div class="container">
            <card-list></card-list>
        </div>
    </template>
    <!-- 消息页面 -->
    <template id="message-view">
        <div class="container">消息页面</div>
    </template>
    <!-- 搜索页面 -->
    <template id="search-view">
        <div class="container">搜索页面</div>
    </template>
    <!-- 个人中心页面 -->
    <template id="my-view">
        <div class="container">个人中心页面</div>
    </template>
    <template id="list-card">
        <div class="card-list__container">
            <template v-for="item of cardList">
                <div class="card-item" :id="item.id">
                    <div class="thumb">
                        <img class="thumb-image" :src="item.src" alt="正在加载中···"/>
                    </div>
                    <div class="thumb-introduce">
                        <div class="thumb-introduce__title ellipsis">{{ item.title }}</div>
                        <p class="thumb-introduce__desc ellipsis">{{ item.description }}</div>
                    </div>
                </div>
            </template>
        </div>
    </template>
    <!-- 卡片骨架图 -->
    <template class="card" id="card-temp">
        <div :class="[loading ? 'card loading':'card']">
            <div class="image">
                <img src="images/wake-up-and-code.webp" alt="" />
            </div>
            <div class="content">
                <h4 class="title"> {{ title }}</h4>
                <div class="description">{{description}}</div>
            </div>
        </div>
        </div>
    </template>
    <script defer src="./js/views.js"></script>
    <script defer src="./js/routes.js"></script>
    <script src="../libs/element-ui/index.js"></script>
    <script type="text/javascript">
        Vue.use(VueRouter)
        // Vue.use(ElementUI)
        window.onload = function () {
            const vm = new Vue({
                el: "#app",
                router: router,
                data() {
                    return {
                        list: [
                            { id: 0, label: "主页", icon: "el-icon-s-home", path: "/home" },
                            { id: 1, label: "搜索", icon: "el-icon-search", path: "/search" },
                            { id: 2, label: "消息", icon: "el-icon-s-promotion", path: "/message" },
                            { id: 3, label: "我的", icon: "el-icon-user", path: "/personal-center" },
                        ]
                    }
                }
            })
        }
    </script>
</body>

</html>